<template>
    <div>
        <attribute-tabs title="空白间距">
            <div slot="content">
                <el-form ref="form" label-width="80px" size="small" label-position="left">
                    <attribute-item title="空白间距高度">
                        <template>
                            <el-form-item label="高度">
                                <slider :max="100" v-model="styles.height" />
                            </el-form-item>
                        </template>
                    </attribute-item>
                </el-form>
            </div>
            <div slot="styles">
                <el-form ref="form" label-width="80px" size="small" label-position="left">
                    <attribute-item title="颜色设置">
                        <el-form-item label="底部背景">
                            <color-select v-model="styles.root_bg_color" reset-color="" />
                        </el-form-item>
                        <el-form-item label="组件背景">
                            <color-select v-model="styles.bg_color" reset-color="#FFFFFF" />
                        </el-form-item>
                    </attribute-item>
                      <attribute-item title="边距设置">
                        <el-form-item label="上边距">
                            <slider v-model="styles.padding_top" />
                        </el-form-item>
                        <el-form-item label="下边距">
                            <slider v-model="styles.padding_bottom" />
                        </el-form-item>
                        <el-form-item label="左右边距">
                            <slider v-model="styles.padding_horizontal" />
                        </el-form-item>
                    </attribute-item>
                </el-form>
            </div>
        </attribute-tabs>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import AttributeTabs from "@/components/decorate/attribute-tabs.vue";
import ColorSelect from "@/components/decorate/color-select.vue";
import Slider from "@/components/decorate/slider.vue";
import AttributeItem from "@/components/decorate/attribute-item.vue";
@Component({
    components: {
        AttributeTabs,
        ColorSelect,
        Slider,
        AttributeItem,
    },
})
export default class Attribute extends Vue {
    /** S computed **/

    get content() {
        return this.$store.getters.content;
    }

    set content(val) {
        let data = {
            key: "content",
            value: val,
        };
        this.$store.commit("setAttribute", data);
    }
    get styles() {
        return this.$store.getters.styles;
    }

    /** E computed **/
}
</script>

<style lang="scss" scoped>
</style>